<template>
	<view class="loading-container">
		<!-- 内容区域：根据状态显示不同内容 -->
		<view class="content-wrapper">
			<!-- 初始加载前 -->
			<view v-if="status === 'before'" class="state-view before-view">
				<uni-icons type="spinner-cycle" size="50" color="#ccc" class="loading-icon rotate"></uni-icons>
				<slot name="before"></slot>
			</view>
			<!-- 加载完成时显示列表内容 -->
			<view v-if="showContent" class="state-view success-view">
				<slot></slot>
				<!-- 列表内容在这里渲染 -->
			</view>
			<!-- 无数据状态（没有列表内容时显示） -->
			<view v-else-if="status === 'empty'" class="state-view empty-view">
				<slot name="empty">
					<view class="globalKong1" v-if="props.isactivity">
						<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/kk2.png" class="empty-img"></image>
						<view class="text">
							本分类活动正在集体“摸鱼”，
							<view class="">你快抓住它，成为第一个发起人；</view>
							<view class="">也可以“举报摸鱼”，</view>
							<view class="">向分社长提交你的活动创意，我们来落地!</view>
						</view>
					</view>
					<view class="globalKong" v-else>
						<image src="/static/k4.png" class="empty-img"></image>
						<view class="text">{{ emptyText || '暂无数据' }}</view>
					</view>
				</slot>
			</view>
		</view>
		<!-- 上拉加载中区域：在列表内容下方 -->
		<view v-if="status === 'loading'" class="loading-area">
			<text class="loading-text">
				{{ loadingText || '加载中' }}
				<text class="dots wave">
					<text class="dot">.</text>
					<text class="dot">.</text>
					<text class="dot">.</text>
					<text class="dot">.</text>
				</text>
			</text>
			<slot name="loading"></slot>
		</view>
		<!-- 无更多数据区域：在列表内容下方 -->
		<view v-if="status === 'noMore'" class="no-more-area">
			<text class="no-more-text">{{ noMoreText || '没有更多数据了~' }}</text>
			<slot name="noMore"></slot>
		</view>
	</view>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue';

const props = defineProps({
	status: {
		type: String,
		required: true,
		validator: (value) => ['before', 'loading', 'success', 'empty', 'noMore'].includes(value)
	},
	loadingText: {
		type: String,
		default: ''
	},
	emptyText: {
		type: String,
		default: ''
	},
	noMoreText: {
		type: String,
		default: ''
	},
	retryText: {
		type: String,
		default: '重新加载'
	},
	isactivity: {
		type: Boolean,
		default: false
	},
	showRetry: {
		type: Boolean,
		default: false
	}
});

// 计算属性：判断是否显示列表内容
const showContent = computed(() => {
	return props.status === 'success' || props.status === 'loading' || props.status === 'noMore';
});

const emit = defineEmits(['retry']);
</script>

<style lang="scss" scoped>
.loading-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.content-wrapper {
	width: 100%;
}

.state-view {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* 初始加载前 */
.before-view {
	min-height: 300rpx;
	padding: 40rpx 0;
}

/* 成功状态（列表内容占满宽度） */
.success-view {
	width: 100%;
}

/* 上拉加载中区域：在列表内容下方 */
.loading-area {
	width: 100%;
	padding: 20rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #999;
	font-size: 26rpx;
	background-color: transparent;
}

/* 无更多数据区域：在列表内容下方 */
.no-more-area {
	width: 100%;
	padding: 20rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #999;
	font-size: 26rpx;
	background-color: transparent;
}

/* 旋转动画 */
.rotate {
	animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* 省略号动画 */
.dots {
	display: inline-block;
}

.dot {
	opacity: 0;
	animation: dotFade 1.5s infinite;
}

.dot:nth-child(1) {
	animation-delay: 0s;
}

.dot:nth-child(2) {
	animation-delay: 0.2s;
}

.dot:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes dotFade {
	0%,
	100% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
}

/* 另一种波浪动画效果（可选） */
.dots.wave .dot {
	display: inline-block;
	animation: wave 1.5s ease-in-out infinite;
}

.dots.wave .dot:nth-child(1) {
	animation-delay: 0s;
}

.dots.wave .dot:nth-child(2) {
	animation-delay: 0.1s;
}

.dots.wave .dot:nth-child(3) {
	animation-delay: 0.2s;
}

@keyframes wave {
	0%,
	60%,
	100% {
		transform: translateY(0);
		opacity: 0.4;
	}
	30% {
		transform: translateY(-5rpx);
		opacity: 1;
	}
}
/* 空状态样式 */
.globalKong1 {
	width: 100%;
	margin: 128rpx auto;
	text-align: center;
	image {
		width: 452rpx;
		height: 184rpx;
	}
	.text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613E;
		margin-top: 50rpx;
		text-align: center;
		line-height: 50rpx;
	}
}
/* 空状态样式 */
.globalKong {
	width: 360rpx;
	margin: 128rpx auto;
	image {
		width: 360rpx;
		height: 232rpx;
	}
	.text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #979797;
		margin-top: 50rpx;
		text-align: center;
	}
}
</style>
